import { Outlet, useLocation, useNavigate } from "react-router-dom";
import { Menu as AntdMenu, MenuProps } from "antd";
import "./menu.css";

const items: MenuProps["items"] = [
  {
    key: "1",
    label: "会议室管理",
  },
  {
    key: "2",
    label: "预定管理",
  },
  {
    key: "3",
    label: "用户管理",
  },
  {
    key: "4",
    label: "统计",
  },
];

export function Menu() {
  const navigate = useNavigate();
  const location = useLocation();

  const handleMenuItemClick: MenuProps["onClick"] = (info) => {
    let path = "";
    switch (info.key) {
      case "1":
        path = "/meeting_room_manage";
        break;
      case "2":
        path = "/booking_manage";
        break;
      case "3":
        path = "/user_manage";
        break;
      case "4":
        path = "/statistics";
        break;
    }
    navigate(path);
  };

  const getSelectedKeys = () => {
    switch (location.pathname) {
      case "/meeting_room_manage":
        return ["1"];
      case "/booking_manage":
        return ["2"];
      case "/user_manage":
        return ["3"];
      case "/statistics":
        return ["4"];
      default:
        return ["1"];
    }
  };

  return (
    <div id="menu-container">
      <div className="menu-area">
        <AntdMenu
          defaultSelectedKeys={getSelectedKeys()}
          items={items}
          onClick={handleMenuItemClick}
        />
      </div>
      <div className="content-area">
        <Outlet></Outlet>
      </div>
    </div>
  );
}
